<template>
  <div style="width: 50%;margin: auto">

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="color: #007bff">IT帮  >  <span> {{ taskData.mandateTitle }}</span></span>
      </div>
      <div>
        <div style="width:15%;float: left;text-align: center;">
          <el-avatar :size="100" :src="taskData.imgUrl"></el-avatar>
          <p>{{ taskData.isSuerName }}</p>
        </div>
        <div style="width:80%;float: right;margin-bottom: 20px">
          <div>
            <p style="background-color: #ececec;font-size: 25px;font-weight: 500">{{ taskData.mandateTitle }}</p>
          </div>
          <div style="padding: 10px">
            <span style="color: #fd5f39">合作方式：</span>
            <span v-if="taskData.operationMode===1"> 远程 </span>
            <span v-else-if="taskData.operationMode===2"> 远程 </span>
            <span v-else-if="taskData.operationMode===3"> 远程+驻场 </span>
            <br>
            <span style="color: #fd5f39">预估日薪：</span><span>{{ taskData.salary }}</span><br>
            <span style="color: #fd5f39">预估工时：</span><span>{{ taskData.workCycle }}</span><br>
            <span style="color: #fd5f39">所在区域：</span><span>{{ taskData.workPlace }}</span><br>
          </div>
        </div>
      </div>
    </el-card>

    <el-card class="box-card" style="margin-top: 20px">
      <div slot="header" class="clearfix">
        <span style="font-size: 20px;font-weight:bold">需求描述</span>
      </div>

      <div>
        <p>{{ taskData.requirementsDescription }}</p>
      </div>

      <div style="margin-top: 50px">
        <el-button type="success" style="width: 280px;margin-right: 20px" @click="resumeDelivery">投递职位</el-button>
        <span style="color: #8c939d;font-size: 16px">已有 <span style="color: #007bff"> {{ num }} </span> 人投递</span>
      </div>
    </el-card>


    <el-card class="box-card" style="margin-top: 50px">
      <div style="margin-bottom: 10%">
        <div style="width: 6%;float: left">
          <el-avatar :size="48" :src="pushComment.imgUrl" style="margin: auto"></el-avatar>
        </div>

        <div style="width: 70%;float: left">
          <el-input
              type="textarea"
              :rows="rows"
              @focus="focus"
              @blur="blur"
              placeholder="请输入内容"
              v-model="pushComment.content">
          </el-input>
        </div>

        <div style="width:15%;float: left;text-align: center">
          <el-button type="info" plain @click="uploadComment(0)">发布评论</el-button>
        </div>
      </div>

      <div style="clear: both" v-for="(pullComment,index) in pullCommentList" :key="index">

        <div style="width: 6%;float: left">
          <el-avatar :size="40" :src="pullComment.imgUrl" style="margin: auto"></el-avatar>
        </div>

        <div style="width: 80%;float: left">
          <span style="color: #8c939d">{{ pullComment.nickName }} : </span>
          <span style="font-weight: 500"> {{ pullComment.content }} </span>
          <span style="color: #8c939d"> {{ pullComment.createTime.substr(0, 10) }} </span>
          <span style="color: #007bff;cursor:pointer" @click="pullComment.reply=!pullComment.reply"> 回复 </span>
        </div>

        <div style="width:8%;float: left;text-align: center" @click="pullComment.more=!pullComment.more">
          <p style="color: #007bff;cursor:pointer" @click="getCommentSon(pullComment.commentId)">查看更多</p>
        </div>

        <div v-if="pullComment.more" style="clear: both">

          <div style="clear: both"
               v-for="(pullCommentSon,index) in pullCommentListSon[pullComment.commentId]"
               :key="index">

            <div style="width: 6%;float: left;margin-left: 10%">
              <el-avatar :size="40" :src="pullCommentSon.imgUrl" style="margin: auto"></el-avatar>
            </div>

            <div style="width: 70%;float: left">
              <span> {{ pullCommentSon.nickName }} </span>
              <span style="color: #8c939d;font-size: 12px"> 回复 </span>
              <span>{{ pullComment.nickName }}: </span>
              <span style="font-weight: 500"> {{ pullCommentSon.content }} </span>
              <span style="color: #8c939d"> {{ pullCommentSon.createTime }} </span>
              <span style="color: #007bff;cursor:pointer"
                    @click="pullCommentSon.reply=!pullCommentSon.reply"> 回复 </span>
            </div>

            <div style="clear: both;margin-left: 10%" v-if="pullCommentSon.reply">
              <el-input style="width: 70%;"
                        type="textarea"
                        :rows="rows"
                        placeholder="请输入内容"
                        v-model="pushComment.content">
              </el-input>
              <el-button type="info" plain @click="uploadComment(pullCommentSon.commentId)">发布评论</el-button>
            </div>
          </div>
        </div>

        <div style="clear: both" v-if="pullComment.reply">
          <el-input style="width: 70%;"
                    type="textarea"
                    :rows="rows"
                    placeholder="请输入内容"
                    v-model="pushComment.content">
          </el-input>
          <el-button type="info" plain @click="uploadComment(pullComment.commentId)">发布评论</el-button>
        </div>

        <div style="clear: both">
          <el-divider></el-divider>
        </div>

      </div>

    </el-card>

  </div>
</template>

<script>
import Vue from 'vue'

export default {
  name: "taskDetails",
  data() {
    return {
      taskId: '',
      taskData: {},
      num: 0,
      rows: 2,

      pushComment: {
        taskId: '',
        content: '',
        userId: this.$store.state.userId,
        nickName: this.$store.state.userName,
        imgUrl: this.$store.state.userImg,
        commentParentId: 0,
      },

      pullCommentList: [],
      pullCommentListSon: {},
    }
  },
  methods: {
    focus() {
      this.rows = 4
    },
    blur() {
      this.rows = 2
    },
    async init() {
      const {data: res} = await this.$http.get('/task/task/' + this.taskId)
      this.taskData = res.content
    },
    async getNum() {
      const {data: res} = await this.$http.get('/task/totalNumber/' + this.taskId)
      this.num = res.content
    },
    async resumeDelivery() {
      if (this.taskData.isSuerId === this.$store.state.userId) {
        Vue.prototype.$notify.error({
          title: "投递失败",
          message: "不能投递自己任务"
        })
        return
      }
      const {data: res} = await this.$http.post('/task/delivery', {
        taskId: parseInt(this.taskId),
        userId: this.$store.state.userId
      })
      console.log(res)
      if (res.code === "201") {
        Vue.prototype.$notify.success({
          title: "成功",
          message: "投递成功"
        })
        await this.$router.push('/userLoginMain/personCenter/pCMyWork')
      } else {
        Vue.prototype.$notify.warning({
          title: "错误",
          message: "请勿重复投递"
        })
      }
    },
    async initComment() {
      const {data: res} = await this.$http.get('/comment/firstLevelComments/' + this.taskId)
      this.pullCommentList = []
      for (let i = res.content.length - 1; i >= 0; i--) {
        this.$set(res.content[i], 'more', false)
        this.$set(res.content[i], 'reply', false)
        this.pullCommentList.push(res.content[i])
      }
    },
    async getCommentSon(commentId) {
      const {data: res} = await this.$http.get('/comment/replyComment/' + commentId)
      for (let i = 0; i < res.content.length; i++) {
        this.$set(res.content[i], 'reply', false)
      }
      this.$set(this.pullCommentListSon, commentId, res.content)
    },
    async uploadComment(fasterId) {
      this.pushComment.commentParentId = fasterId
      const {data: res} = await this.$http.post('/comment/comment', this.pushComment)
      if (res.code === '201') {
        this.pushComment.content = ''
        await this.initComment()
      }
    }
  },
  mounted() {
    const loading = this.$loading({
      lock: true,
      text: 'Loading',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    this.taskId = this.$route.query.id
    this.pushComment.taskId = this.taskId
    this.init()
    this.getNum()

    this.initComment()
    loading.close()

  }
}
</script>

<style scoped>

</style>